<template>
  <div class="layout-all">
    <control :config="config" />
    <div class="layout-header" style="float: left;" v-if="model=='shop'">
        <router-link to="./form/">
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 0px;"
          >添加</el-button
        >
      </router-link>
    </div>
    <div class="layout-content">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        @sort-change="sort_change"
        style="width: 100%; margin-top: 50px;"
      ><el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
      <el-table-column align="center" prop="shop_name" label="店铺" v-if="model!='shop'"/>
        <el-table-column align="center" prop="goods_sn" label="货号" width="90"/>
        <el-table-column align="center" prop="title" label="商品名" width="200">
          <template slot-scope="scope">
            <span class="shen-he" v-if="scope.row.is_check==0">审核中</span>
            {{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cate_t1" label="系统分类" width="180" >
          <template slot-scope="scope">
            {{ scope.row.cate_t1 !== null ? scope.row.cate_t1.title : "" }} /
              {{
                scope.row.cate_t2 !== null ? scope.row.cate_t2.title : ""
              }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="shop_cate_t1.title" label="商铺分类" width="100" />
        <el-table-column align="center" prop="thumb" label="封面" width="100">
          <template slot-scope="scope">
            <pre-view :src="scope.row.thumb" height="50px" width="50px" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="show_price" label="展示价格" width="80" />
        <el-table-column align="center" prop="real_price" label="销售价格" width="100" />
        <el-table-column align="center" prop="status" label="是否启用" width="100" sortable="custom">
          <template slot-scope="scope">
            <el-button :type="scope.row.status === 1 ? 'primary' : 'success'" size="mini"
              @click="change_status(scope.row.id, 'status', scope.row.status)"
              >{{ scope.row.status === 1 ? "是" : "否" }}</el-button >
          </template>
        </el-table-column>

        <el-table-column align="center" prop="is_recommend" label="是否推荐" width="100" sortable="custom" >
          <template slot-scope="scope">
            <el-button :type="scope.row.is_recommend === 1 ? 'primary' : 'success'" size="mini"
              @click="change_status(scope.row.id,'is_recommend',scope.row.is_recommend)">{{ scope.row.is_recommend === 1 ? "是" : "否" }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="is_choiceness" label="是否精选" width="100" sortable="custom">
          <template slot-scope="scope">
            <el-button :type="scope.row.is_choiceness === 1 ? 'primary' : 'success'" size="mini"
              @click="change_status(scope.row.id,'is_choiceness',scope.row.is_choiceness)">{{ scope.row.is_choiceness === 1 ? "是" : "否" }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="is_new" label="是否新品" width="100" sortable="custom" >
          <template slot-scope="scope">
            <el-button :type="scope.row.is_new === 1 ? 'primary' : 'success'" size="mini" 
            @click="change_status(scope.row.id, 'is_new', scope.row.is_new)" >{{ scope.row.is_new === 1 ? "是" : "否" }}</el-button >
          </template>
        </el-table-column>
        <el-table-column align="center" prop="is_hot" label="是否热卖"  width="100" sortable="custom" >
          <template slot-scope="scope">
            <el-button  :type="scope.row.is_hot === 1 ? 'primary' : 'success'" size="mini"
              @click="change_status(scope.row.id, 'is_hot', scope.row.is_hot)" >{{ scope.row.is_hot === 1 ? "是" : "否" }}</el-button >
          </template>
        </el-table-column>
        <el-table-column align="center" label="真实销量"  width="80" >
        <template slot-scope="scope">
            {{scope.row.sale_count-scope.row.sale_inv}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sale_inv" label="虚拟销量" width="80" />
        <el-table-column align="center" prop="stock" label="库存" width="70" />
         <el-table-column align="center" prop="stock" label="记录" width="70" >
          <template slot-scope="scope" >
            <el-button type="primary" size="small" icon="el-icon-edit-outline" circle  @click="stock_log_click(scope.row)"></el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sales_date" label="出售时间" width="130" />
        <el-table-column
          align="center"
          prop="telephone"
          :fixed="isMobile()?undefined:'right'"
          :width="model=='shop'?'280':'180'"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
            v-if="model=='shop'"
              type="success"
              size="small"
              icon="el-icon-s-tools"
              @click="stock_click(scope.row)"
            /> 
            <router-link :to="(model=='shop'?'./form/':type_show=='0'?'./admin_form/':'') + scope.row.id">
            <el-button size="small" type="primary" icon="el-icon-edit" />
            </router-link>
            <el-button
              v-if="model=='shop'"
              type="warning"
              size="small"
              icon="el-icon-plus"
              @click="stock_click_desc(scope.row)"
            >评论</el-button>
            <el-button type="warning" size="small" v-if="type_show==1" @click="onExamine(scope.row.id)">通过</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="onDel(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
        <!-- 评论 -->
    <el-dialog title="增加评论" :visible.sync="dialog_visible_desc" :width="isMobile()?'100%':'50%'" >
        <el-form
        ref="stock_form1"
        :rules="rules"
        label-width="100px"
        :label-position="isMobile()?'top':'left'"
      >
        <el-form-item  label="内容:">
          <el-tag>一行一个,格式: 名字|内容(仅输入内容将显示为匿名评论)</el-tag>
          <el-input
            v-model="evaluate.content"
            type="textarea"
            :rows="10"
            placeholder="请输入内容"
          />
        </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_visible_desc = false">取 消</el-button>
        <el-button type="primary" @click="click_desc">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- 规格库存 -->
    <drawer title="操作规格库存" :isShow="spec_dialog"  @update:isShow="spec_dialog=false" :width="'.5'">
      <spec-panel v-if="spec_dialog" :id="goods_id" :is_spec="is_spec" @close="stock_close"/>
    </drawer>
    <drawer title="库存记录" :isShow="stoc_visible"  @update:isShow="stoc_visible=false" width=".3">
      <stockLog v-if="stoc_visible" :id="goods_id"/>
    </drawer>
  </div>
</template>

<script>
import control from "@/components/control/control";
import stockLog from '@/components/orderlist/stockLog'
import SpecPanel from '@/components/orderlist/SpecPanel'
export default {
  name:"GoodsList",
  props:['model','type_show'],
  components: { control,stockLog,SpecPanel },
  data() {
    return {
      goods_id: "",
      shop_name: [],
      loading: false,
      stoc_visible: false,
      spec_dialog: false,
      is_spec: 0,
      dialog_visible_desc: false,
      evaluate:{id:0,content:''},
      config: [
        { type: "text", placeholder: "请输入商品名或货号", field: "title", val: "" },
        {
          type: "cascader",
          placeholder: "请选择系统分类",
          field: "system_sort",
          val: "",
          options: [],
        },
        {
          type: "select",
          placeholder: "选择商铺分类",
          field: "shop_cate_t1_id",
          val: "",
          options: [],
        },
        {
          type: "select",
          placeholder: "请选择启用状态",
          field: "status",
          val: "",
          options: [
            {
              value: 0,
              label: "未启用",
            },
            {
              value: 1,
              label: "已启用",
            },
          ],
        },
      ],
      dateTime: "",
      value: "",
      searchWhere: {
        title: "",
        system_sort: [],
        status: "",
        shop_cate_t1_id: '',
      },
      tableData: [],
      spec_tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
      rules: {
        remark: [
          { required: true, message: "请输入修改原因", trigger: "blur" },
        ],
        stock: [{ required: true, message: "请输入添加数量", trigger: "blur" }],
      },
      spce_rules: {},
    };
  },
  activated(){
    if(this.$getUpdate()){
      this.onSearch()
    }
  },
  created() {
    this.onSearch();
    this.get_allsort();
  },
  methods: {
    sort_change(e){
      if(e.order!=undefined){
        this.searchWhere.sort=e.prop+' '+(e.order=='ascending'?'asc':'desc')
      }else{
        this.searchWhere.sort=''
      }
      this.handleCurrentChange(1)
      console.log(this.searchWhere.sort)
    },
        //审核通过
    onExamine(id){
      this.$msg_confirm_show("确定要通过此商品审核?").then((e) => {
        const form = {};
        form.id = id;
        form.field = 'is_check';
        form.val = 1;
        this.get('/admin/Goods/update', form, "post").then((e) => {
          this.$msg_ok("success", "修改成功");
          this.onSearch();
        });
      });
    },
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    // 查询
    onSearch() {
      this.loading = true;
      const form = {};

      form.page = this.current_page;
      form.map = this.searchWhere;

      if (this.searchWhere.system_sort.length === 2) {
        form.map.cate_t1_id = this.searchWhere.system_sort[0];
        form.map.cate_t2_id = this.searchWhere.system_sort[1];
      } else {
        form.map.cate_t1_id = this.searchWhere.system_sort[0];
        form.map.cate_t2_id = "";
      }
      
      if(this.model!='shop'&&this.type_show==1){
        form.ex = 0;
      }
      this.get("/"+this.model+"/Goods/index", form, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;

        if(this.model=='admin'){
          if(this.shop_name.length==0){
             for(let i in e.shop_list){
              this.shop_name[e.shop_list[i].value]=e.shop_list[i].label
            }
            this.$set(this.config,2,{
              type: "select",
              placeholder: "请选择商户",
              field: "shop_id",
              val: "",
              options: e.shop_list,
            })
          }
          for(let i in this.tableData){
            this.tableData[i].shop_name=this.shop_name[this.tableData[i].shop_id]
          }

        }
        this.loading = false;
      });
    },
    // 获取系统和商铺分类
    get_allsort() {
      this.get("/shop/Index/goods_cate", "post").then((e) => {
        this.config[1].options = e.cate;
        if(this.model=='shop'){
          this.config[2].options = e.shop_cate;
        }
        
      });
    },
    change_status(id, field, val) {
      // this.update(id, val, field, "Goods").then((e) => {
      //   e ? this.onSearch() : "";
      // });
      const form = {};
      form.id = id;
      form.field = field;
      val === 1 ? (form.val = 0) : (form.val = 1);
      this.get(`/shop/Goods/update`, form, "post").then((e) => {
        this.$msg_ok("success", "修改成功");
        this.onSearch()
      });
    },

    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      let mapList={map:this.searchWhere,current_page:this.current_page}
      localStorage.setItem(process.env.CACHE_CONTROL,JSON.stringify(mapList))
      this.$router.push('./form?id='+id);
    },
    //打开规格
    stock_click(row) {
      this.goods_id = row.id
      this.is_spec = row.is_spec
      this.spec_dialog = true;
    },
    //规格保存完成
    stock_close(type=0){
      this.spec_dialog = false;
      if(type==0)
      this.onSearch();
    },
    stock_log_click(row) {
      this.goods_id=row.id
      this.stoc_visible=true
    },
    stock_click_desc(row) {
      this.evaluate.content=''
      this.dialog_visible_desc = true;
      this.evaluate.id=row.id
    },
    click_desc() {
      if(this.evaluate.content==''){
        this.$msg_ok("error", "请输入评论内容");
        return
      }
      this.get("/shop/Goods/add_evaluate", this.evaluate, "post").then(
            (e) => {
              this.$msg_ok("success", "操作成功");
              this.dialog_visible_desc = false;
            }
          );
    },

    // 删除
    onDel(id) {
      this.$msg_confirm().then((e) => {
        this.get("/shop/Goods/del?id=" + id, "", "POST").then((res) => {
          this.onSearch();
        });
      });
    },
  },
};
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.flex_row {
  display: flex;
  align-items: center;
}
.shen-he {
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    z-index: 10;
    border-radius: 12%;
    height: 25px;
    line-height: 14px;
    text-align: center;
    background-color: rgb(255 0 0 / 68%);
    color: rgb(255, 255, 255);
    padding: 5px;
}
</style>>
